<template>
	<view class="wrapper">
		<u-toast ref="uToast" /><u-no-network></u-no-network>
		<u-navbar title="管理中心" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<!-- 	<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line> -->
				<u-icon name="home" size="22" @click="goHome"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>
		<view class="header">
			<image class="center-bg" src="/static/images/managemenCenter-bg.png" mode=""></image>
			<view class="card">
				<view class="head">
					<image class="cover" :src="userInfo.url"></image>
					<view class="detail">
						<view class="name">{{userInfo.nickName}}</view>
						<view class="msg">
							销售商ID: {{userInfo.id}} |
							等级：{{userInfo.gradeName}}
						</view>
						<view class="address">
							<!-- 	<image style="width: 30rpx;height: 30rpx;margin-right: 6rpx;"
								src="/static/images/map-icon.png" mode="">
							</image> -->
							<view class="text">收货地址：{{address}}</view>
							<image @click="handleNaviagte('/pages/member/address/list/list')"
								style="width: 30rpx;height: 30rpx;transform: rotate(180deg);"
								src="/static/images/arrow-left-bold.png" mode=""></image>
						</view>
					</view>
					<image class="rg-icon" src="/static/images/arrow-right-bold.png"
						@click="handleNaviagte('/pages/member/setting/userInfo/index')"></image>
				</view>

				<view class="cotent-list">
					<view class="content-item" v-for="(item, index) in headTabs" @click="handleContentItemClick(index)">
						<view class="count">{{userInfo[item.filed]}}</view>
						<view class="name">{{item.name}}</view>
					</view>
					<image class="rg-icon" src="/static/images/arrow-right-bold.png"
						@click="handleNaviagte('/pages/managemenCenter/dataPanel/index')"></image>
				</view>
			</view>
		</view>

		<view class="card-container">
			<!-- 我的公域 -->
			<Card :cardType="{Htype: 'title'}"
				:data="{title: '我的公域',tPrefix: true, list: shopManageTabs, ItemgBgUrl: '/static/images/supplier/gys-bar-icon.png', wrap: true}"
				@onCtTapClick="handleCtTapClick" />

			<!-- 通告栏 -->
			<uni-notice-bar single show-icon show-get-more text="4销售赚2500万元! 这就是直播小程序的威力"
				@getmore="getMore"></uni-notice-bar>

			<!--客户订单  -->
			<Card :cardType="{Htype: 'constom', Ftype: 'constom'}">
				<template #head>
					<div class="order-header">
						<view class="title">客户订单</view>
						<view class="checkMore" @click="handleNaviagte('/pages/member/order/index/index')">
							查看更多
							<image class="arrow-icon" src="/static/images/arrow-right-bold.png" mode=""></image>
						</view>
					</div>
				</template>
				<template #footer>
					<view class="order-list">
						<view class="order-item" v-for="(item, index) in orderTabs" :key="index"
							@click="handleNaviagte('/pages/member/order/index/index?swiperCurrentIndexId=' + (index + 1))">
							<image class="icon" :src="item.url" mode=""></image>
							<div class="name">{{item.name}}</div>
							<view class="pop">
								{{userInfo.order[item.filed]}}
							</view>
						</view>
					</view>
				</template>
			</Card>

			<!-- 私域助力 -->
			<Card :cardType="{Htype: 'title'}"
				:data="{title: '私域助力',tPrefix: true, list: privateSphereTabs, ItemgBgUrl: '/static/images/supplier/gys-bar-icon.png'}" />

			<!-- 商家动态 -->
			<Card :cardType="{Htype: 'title', Ftype: 'constom'}" :data="{title: '商家动态',tPrefix: true}">
				<template #footer>
					<view class="dynamic-list">
						<view class="dynamic-item" v-for="(item, idx) in dynamicList" :key="idx">
							<view class="head">
								<image class="cover" :src="item.url" mode=""></image>
								<view class="detail">
									<view class="name">{{item.name}}</view>
									<view class="time">{{item.time}}</view>
								</view>
							</view>
							<view class="dynamic-body">
								<view class="title">
									<span class="tag">{{item.tags[0]}}
									</span>
									{{item.title}}
								</view>
								<view class="content-list">
									<image class="content-img" v-for="content in item.productExhibitions" :src="content"
										mode=""></image>
								</view>
								<view class="operation">
									<view class="lf">
										<view class="imgs">
											<image v-for="cover in item.Covers" class="operation-img" :key="cover"
												:src="cover" mode="">
											</image>
										</view>
										<view class="col">点赞+{{item.dz}}</view>
										<view class="col">加购{{item.jg}}</view>
										<view class="col">浏览{{item.ll}}</view>
									</view>
									<view class="rg">
										<view class="col">
											<image class="operation-icon"
												:src="isCollect ? '/static/images/collect-active.png' : '/static/images/collect.png'">
											</image>
										</view>
										<view class="col">
											<image class="operation-icon" src="/static/images/comment-icon.png" mode="">
											</image>
										</view>
									</view>
								</view>
								<view class="comment">
									<view class="comment-item" v-for="(comment, index) in item.pl" :key="index">
										<view class="label">
											{{comment.name}}
											<view class="tag">{{comment.isShop ? '买过' : '未买'}}</view>
											<view style="font-weight: 400;">:</view>
										</view>
										<view class="text">{{ comment.text}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
			</Card>
		</view>

		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>

		<tab-bar />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '', // 销售商名称
					url: 'http://cdnjson.com/images/2024/11/02/image-3.png', // 销售商头像
					id: '1299', // 销售商id
					grade: '销售商', // 销售商等级
					todayOrderCount: 0, // 今日订单
					todayAmount: 0, // 今日金额
					todayClient: 1, // 今日客户
					todayPageview: 222, // 今日浏览
					order: { // 客户订单
						dfk: 0, // 待付款
						dfh: 0, // 待发货
						dsh: 0, // 待收货
						dpj: 0 // 待评价
					}
				},
				afterSaleNums: null,
				headTabs: [{
						name: '今日订单',
						filed: 'todayOrderCount'
					},
					{
						name: '今日金额',
						filed: 'todayAmount'
					},
					{
						name: '今日客户',
						filed: 'todayClient'
					},
					{
						name: '今日浏览',
						filed: 'todayPageview'
					}
				],
				orderTabs: [{
						name: '待付款',
						url: '/static/images/center/Sidebar.png',
						filed: 'dfk'
					},
					{
						name: '待发货',
						url: '/static/images/center/Clock.png',
						filed: 'dfh'
					},
					{
						name: '待收货',
						url: '/static/images/center/Truck.png',
						filed: 'dsh'
					},
					{
						name: '待评价',
						url: '/static/images/center/MessageCircle.png',
						filed: 'dpj'
					}
				],
				shopManageTabs: [{
						name: '员工管理',
						url: '/static/images/center/solar_user-linear.png',
						type: 'yggl',
						path: '/pages/member/dealer/salesperson/list/list?title=员工管理'
					},
					{
						name: '商品管理',
						url: '/static/images/center/solar_cart-linear.png',
						type: 'spgl',
						path: '/pages/member/dealer/dealerGoods/list/list?title=商品管理'
					},
					{
						name: '资金管理',
						url: '/static/images/center/solar_dollar-linear.png',
						type: 'zjgl',
						path: ''
					},
					{
						name: '用户管理',
						url: '/static/images/center/solar_smile-square-linear.png',
						type: 'yhgl',
						path: '/pages/member/dealer/team/team?title=用户管理'
					},
					{
						name: '订单管理',
						url: '/static/images/center/solar_clipboard-list-linear.png',
						type: 'ddgl',
						path: '/pages/member/dealer/order/order?title=订单管理'
					},
					{
						name: '销售员业绩',
						url: '/static/images/center/solar_chart-linear.png',
						path: '',
					},
					{
						name: '系统设置',
						url: '/static/images/center/solar_settings-linear.png',
						path: '/pages/member/dealer/storeSetting/storeSetting?title=系统设置',
					},
				],
				privateSphereTabs: [{
						name: '我的供应商',
						url: '/static/images/center/solar_gys-linear.png'
					},
					{
						name: '二次分销',
						url: '/static/images/center/mdi-light_truck.png'
					},
					{
						name: '方案设计',
						url: '/static/images/center/solar_document-add-linear.png'
					},
					{
						name: '项目报备',
						url: '/static/images/center/solar_checklist-linear.png'
					},
				],
				dynamicList: [{
						name: '全沃净水器专卖店', // 名称
						url: 'http://cdnjson.com/images/2024/11/02/image-3.png', // 头像
						productExhibitions: [ // 动态封面图
							'http://cdnjson.com/images/2024/11/04/image-3.png',
							'http://cdnjson.com/images/2024/11/04/image-2.png',
							'http://cdnjson.com/images/2024/11/04/image-1.png',
							'http://cdnjson.com/images/2024/11/04/image-4.png',
							'http://cdnjson.com/images/2024/11/04/image-5.png',
							'http://cdnjson.com/images/2024/11/04/image-6.png',
							'http://cdnjson.com/images/2024/11/04/image-7.png',
							'http://cdnjson.com/images/2024/11/04/image-8.png',
							'http://cdnjson.com/images/2024/11/04/image-9.png',
						],
						time: '今日发布', // 发布时间
						Covers: [ // 点赞用户的头像
							'http://cdnjson.com/images/2024/11/04/Avatar.png',
							'http://cdnjson.com/images/2024/11/04/11.png'
						],
						title: '揭秘独家好货，新品闪亮登场，让每一刻充满惊喜！', // 动态标题
						tags: ['上新'], // 标签
						dz: 3, // 动态点赞数
						jg: 489, // 加购数
						ll: 89655, // 浏览量
						pl: [{ // 评论区列表
							name: '花开富贵', // 评论人的用户名
							isShop: true, // 是否购买过
							text: '非常好！！很好用，客服也超级好' // 评论文本
						}]
					},
					{
						name: '全沃净水器专卖店',
						time: '昨日发布',
						url: 'http://cdnjson.com/images/2024/11/02/image-3.png',
						productExhibitions: [
							'http://cdnjson.com/images/2024/11/04/image-6.png',
							'http://cdnjson.com/images/2024/11/04/image-7.png',
							'http://cdnjson.com/images/2024/11/04/image-8.png',
							'http://cdnjson.com/images/2024/11/04/image-9.png',
							'http://cdnjson.com/images/2024/11/04/image-3.png',
							'http://cdnjson.com/images/2024/11/04/image-2.png',
							'http://cdnjson.com/images/2024/11/04/image-1.png',
							'http://cdnjson.com/images/2024/11/04/image-4.png',
							'http://cdnjson.com/images/2024/11/04/image-5.png',
						],
						Covers: [
							'http://cdnjson.com/images/2024/11/04/Avatar.png',
							'http://cdnjson.com/images/2024/11/04/11.png'
						],
						title: '揭秘独家好货，新品闪亮登场，让每一刻充满惊喜！',
						tags: ['怀旧'],
						dz: 3,
						jg: 489,
						ll: 89655,
						pl: [{
							name: '花开富贵',
							isShop: false,
							text: '非常好！！很好用，客服也超级好'
						}]
					},
				],
				isCollect: false,
				address: '',
				status: 'loadmore',
			}
		},
		onLaunch() {
			uni.hideTabBar()
		},
		onShow: function(e) {
			uni.hideTabBar()
			this.handleInitData()
		},
		onReachBottom() {
			console.log(8899);
			if (this.status === 'loading') {
				// this.goodsBrowsing();
			}
		},
		created() {

		},
		mounted() {

		},
		methods: {
			handleCtTapClick(item) {
				const {
					path
				} = item
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
				console.log(item);
			},
			handleInitData() { // 初始化价值数据的方法
				const _this = this
				if (this.$db.get('userToken')) {
					// 获取用户信息和订单不同状态的数量
					this.handleFetchInfoData()
					// 获取默认地州
					this.getFetchAddressData()
				}
			},
			handleNaviagte(url) { // 路由跳转
				uni.navigateTo({
					url
				})
			},
			handleContentItemClick(idx) {
				if (idx === 3) {
					console.log(idx);
					this.handleNaviagte('/pages/member/history/index')
				}
			},
			async handleFetchInfoData() { // 获取用户信息和订单不同状态的数量数据的方法
				const {
					status,
					data
				} = await this.$u.api.userInfo() // 获取用户信息
				if (status) {
					// 将数据合并并赋值给我们的userInfo变量
					this.userInfo = Object.assign(this.userInfo, data)

					// 订单不同状态参数
					let params = {
						ids: '1,2,3,4',
						isAfterSale: true
					}

					const resData = await this.$u.api.getOrderStatusSum(params) // 获取订单不同状态的数量
					if (resData.status) {
						Object.keys(this.userInfo.order).forEach((key, idx) => {
							this.userInfo.order[key] = resData.data[idx + 1]
						})
						console.log(this.userInfo);
						this.afterSaleNums = resData.data['isAfterSale'];
					}
				}
			},
			async getFetchAddressData() { // 获取默认地址数据的方法
				const {
					code,
					data
				} = await this.$u.api.userShip()
				if (code == 0) {
					const info = data.filter(item => item.isDefault)[0]
					// this.address = info?.areaName + info?.address
					console.log(info);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wrapper {
		.header {
			position: relative;
			width: 100%;
			height: 380rpx;

			.center-bg {
				width: 100%;
				height: 380rpx;
			}

			.card {
				position: absolute;
				left: 50%;
				top: 40rpx;
				transform: translateX(-50%);
				width: calc(100% - 40rpx);
				height: 340rpx;
				border-radius: 26rpx;
				background-color: #fff;
				padding: 25rpx 30rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.head {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.cover {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

					.detail {
						flex: 1;
						padding: 0 16rpx;
						font-size: 24rpx;

						.name {
							font-size: 30rpx;
							color: #333;
						}

						.msg {
							padding-top: 8rpx;
							color: #c3c3c3;
						}

						.address {
							display: flex;
							align-items: center;
							color: #8A8A8A;
							padding-top: 8rpx;
						}
					}
				}

				.cotent-list {
					flex: 1;
					display: flex;
					align-items: center;
					border-top: 2rpx solid #F3F3F3;

					.content-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						flex: 1;

						.name {
							color: #C3C3C3;
							font-size: 28rpx;
						}

						.count {
							font-weight: 600;
							font-size: 40rpx;
						}
					}
				}

				.rg-icon {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}

		/deep/ .uni-icons {
			color: #D0241C !important;
		}

		/deep/ .uni-noticebar__content-text--single {
			color: #333 !important;
		}


		/deep/ .uniui-right {
			color: #9F9F9F !important;
		}

		.card-container {
			padding: 20rpx 30rpx;

			.order-header {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					display: flex;
					align-items: center;
					font-size: 29rpx;

					&::before {
						content: '';
						display: inline-block;
						width: 8rpx;
						height: 36rpx;
						background-color: #D0241C;
						border-radius: 3rpx;
						margin-right: 9rpx;
					}
				}

				.checkMore {
					display: flex;
					align-items: center;
					color: #C3C3C3;
					font-size: 24rpx;

					.arrow-icon {
						width: 24rpx;
						height: 24rpx;
					}

				}
			}

			.order-list {
				display: flex;
				align-items: center;
				margin-top: 8rpx;

				.order-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 1;
					position: relative;

					.icon {
						width: 50rpx;
						height: 50rpx;
					}

					.name {
						color: #333;
						margin-top: 8rpx;
						font-size: 28rpx;
					}

					.pop {
						position: absolute;
						top: 0;
						right: 16rpx;
						width: 34rpx;
						height: 34rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						background-color: #D0241C;
						color: #fff;
						font-size: 22rpx;
					}
				}
			}

			// 商家动态列表样式
			.dynamic-list {
				display: flex;
				flex-direction: column;
				box-sizing: border-box;

				.dynamic-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					box-sizing: border-box;

					.head {
						display: flex;
						align-items: center;
						width: 100%;

						.cover {
							width: 100rpx;
							height: 100rpx;
							margin-right: 14rpx;
						}

						.detail {
							flex: 1;

							.time {
								color: #C3C3C3;
							}
						}
					}

					.dynamic-body {
						width: 100%;
						box-sizing: border-box;
						padding-left: 114rpx;

						.title {
							font-size: 26rpx;

							.tag {
								background-color: #34C759;
								color: #fff;
								padding: 2rpx 8rpx;
								height: 40rpx;
								font-size: 26rpx;
								border-radius: 10rpx;
								margin-right: 6rpx;
							}
						}

						.content-list {
							display: flex;
							flex-wrap: wrap;

							.content-img {
								width: 32%;
								height: 170rpx;
								margin: .6%;
								border-radius: 28rpx;
							}
						}

						.operation {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.lf,
							.rg {
								display: flex;
								align-items: center;
							}

							.lf {
								.imgs {
									display: flex;

									.operation-img {
										width: 30rpx;
										height: 30rpx;
									}
								}

								.col {
									font-size: 24rpx;
									color: #C3C3C3;
									margin-left: 10rpx;
								}
							}

							.rg {
								.operation-icon {
									width: 30rpx;
									height: 30rpx;
								}
							}
						}

						.comment {
							display: flex;
							flex-direction: column;
							background-color: #F3F3F3;
							margin-top: 14rpx;
							padding: 16rpx 12rpx;
							border-radius: 14rpx;

							.comment-item {
								display: flex;

								.label {
									display: flex;
									width: 35%;
									font-size: 26rpx;
									font-weight: 600;

									.tag {
										background-color: #FFFFFF;
										color: #A9A9A9;
										font-size: 18rpx;
										height: 30rpx;
										line-height: 30rpx;
										margin: 0 12rpx;
									}
								}

								.text {
									font-size: 23rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>